<script setup lang="ts" name="headMenu">
import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {getCurrentInstance} from 'vue'
import {Message} from "view-ui-plus";

let router = useRouter();
let store = useStore();
let MenuList = reactive([
  {
    title: "首页",
    url: "/"
  },
  {
    title: "文章",
    url: "/article"
  },
  {
    title: "消息",
    url: "/message"
  },
  {
    title: "摸鱼",
    url: "/fishFever"
  }
]);
let scrollHeight = ref(0);

let styles = computed<any>(() => {
  return {
    'position': props.sticky ? 'sticky' : 'fixed',
    'box-shadow': props.sticky ? '0 1px 6px 0 rgba(0, 0, 0, 0.05)' : 'none',
    'background-color': props.sticky ? '#fff' : ''
  }
})

const props = withDefaults(
    defineProps<{
      // 当前高亮文字的索引
      activeIndex?: string | number | null;
      // 控制布局是否占位
      sticky?: boolean;
    }>(),
    //设置默认值
    {
      activeIndex: null,
      sticky: false
    }
);

const clickMenu = (item: any, index: number) => {
  console.log(item)
  router.push(item.url);
}

const getScroll = () => {
  // 获取导航栏高度
  scrollHeight.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}

const openWindow = () => {
  console.log(MenuList, "输出")
}

onMounted(() => {
  // console.log(getCurrentInstance())
  getScroll();
  window.addEventListener('scroll', getScroll);
})


onUnmounted(() => {
  window.removeEventListener('scroll', getScroll);
})

</script>

<template>
  <div class="HeaderMenu" :style="styles" :class="{lucency:scrollHeight == 0}">
    <div class="logo">
      <img src="@/static/image/ey.png" alt="">
    </div>
    <div class="Menu">
      <div class="Mitem" v-for="(item,index) in MenuList" :class="{
        activeIndex:props.activeIndex == index
      }" :key="index"
           @click="clickMenu(item,index)">{{
          item.title
        }}
      </div>
    </div>
    <div class="btns">
      <Poptip width="auto" v-if="store.getters.loginStatus" trigger="hover" placement="bottom">
        <div class="btn user" @click="router.push('/user')">
          进入个人中心
        </div>
        <template #content>
          <Button type="error" @click="store.commit('logout',() => router.push('/'))" style="width: 100%">退出登录
          </Button>
        </template>
      </Poptip>

      <div v-else class="btn login" @click="router.push('/login')">登录/注册</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.HeaderMenu {
  display: flex;
  align-items: center;
  position: fixed;
  height: 85px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  padding: 0 100px;

  &.lucency {
    background-color: transparent;
  }

  .logo {
    img {
      width: auto;
      height: 50px;
    }
  }

  .Menu {
    display: flex;
    margin-left: 100px;

    .Mitem {
      cursor: pointer;
      user-select: none;
      margin: 10px 15px;
      color: #333;

      &.activeIndex, &:hover {
        color: #65ad6a;
      }
    }
  }

  .btns {
    margin: 0 0 0 auto;

    :deep(.ivu-poptip-body) {
      padding: 1px 0 0;
    }

    .btn {
      display: inline-block;
      width: 108px;
      height: 33px;
      border-radius: 4px;
      font-weight: 400;
      font-size: 14px;
      line-height: 33px;
      text-align: center;
      cursor: pointer;
      user-select: none;

      &.login {
        color: #65ad6a;
        border: 1px solid #65ad6a;
      }

      &.user {
        color: #fff;
        border: 1px solid #65ad6a;
        background-color: #65ad6a;
      }

      &:hover {
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }
}
</style>
